<template>
  <ElDialog
    v-model="visible"
    title="积分商品详情"
    width="800px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="handleClose"
  >
    <div v-if="actData" class="detail-container">
      <ElRow :gutter="20">
        <ElCol :span="12">
          <div class="detail-item">
            <label>商品ID：</label>
            <span>{{ actData.id || '暂无' }}</span>
          </div>
        </ElCol>
        <ElCol :span="12">
          <div class="detail-item">
            <label>商品名称：</label>
            <span>{{ actData.scoreName || '暂无' }}</span>
          </div>
        </ElCol>
      </ElRow>

      <ElRow :gutter="20">
        <ElCol :span="12">
          <div class="detail-item">
            <label>商品积分：</label>
            <span>{{ (actData.scoreCnt || 0).toLocaleString() }} 积分</span>
          </div>
        </ElCol>
        <ElCol :span="12">
          <div class="detail-item">
            <label>库存数量：</label>
            <span>{{ (actData.scoreStockNum || 0).toLocaleString() }} 件</span>
          </div>
        </ElCol>
      </ElRow>

      <ElRow :gutter="20">
        <ElCol :span="12">
          <div class="detail-item">
            <label>上架状态：</label>
            {{ actData.scoreUpFlag === 1 ? '下架' : actData.scoreUpFlag === 2 ? '上架' : '未知' }}
          </div>
        </ElCol>
        <ElCol :span="12">
          <div class="detail-item">
            <label>创建时间：</label>
            <span>{{ formatDateTime(actData.createTime) }}</span>
          </div>
        </ElCol>
      </ElRow>

      <div class="detail-item">
        <label>商品图片：</label>
        <div v-if="actData.scorePhoto" class="image-preview">
          <ElImage
            :src="actData.scorePhoto"
            :preview-src-list="[actData.scorePhoto]"
            fit="cover"
            class="view-product-img"
            :preview-teleported="true"
          />
        </div>
        <span v-else class="text-gray-400">无图片</span>
      </div>

      <div class="detail-item">
        <label>商品描述：</label>
        <div class="detail-content">{{ actData.scoreInfo || '暂无' }}</div>
      </div>
    </div>

    <div v-else class="loading-container">
      <ElSkeleton :rows="8" animated />
    </div>

    <template #footer>
      <ElSpace>
        <ElButton @click="handleClose">关闭</ElButton>
      </ElSpace>
    </template>
  </ElDialog>
</template>
<script setup lang="ts">
  import { dayjs } from 'element-plus'
  // 类型定义
  interface Props {
    dialogVisible: boolean
    actData?: any | null
  }
  const props = withDefaults(defineProps<Props>(), {
    dialogVisible: false,
    actData: undefined
  })
  interface Emits {
    (e: 'update:dialogVisible', value: boolean): void
    (e: 'closeEvent'): void
  }

  const emit = defineEmits<Emits>()
  const visible = computed({
    get: () => props.dialogVisible,
    set: (value) => emit('update:dialogVisible', value)
  })
  const formatDateTime = (dateTime?: string) => {
    return dateTime ? dayjs(dateTime).format('YYYY-MM-DD HH:mm:ss') : ''
  }

  const handleClose = () => {
    emit('closeEvent')
  }
</script>
<style lang="scss" scoped>
  .image-preview {
    margin-top: 10px;

    .product-img {
      width: 60px;
      height: 60px;
      cursor: pointer;
      object-fit: cover;
      border-radius: 4px;
    }

    .view-product-img {
      max-width: 300px;
      max-height: 300px;
      object-fit: cover;
      border-radius: 4px;
    }
  }

  .text-gray-400 {
    font-size: 12px;
    color: #9ca3af;
  }

  .detail-container {
    .detail-item {
      margin-bottom: 16px;

      label {
        display: inline-block;
        min-width: 120px;
        margin-right: 8px;
        font-weight: 600;
        color: #606266;
      }

      span {
        color: #303133;
      }

      .detail-content {
        padding: 8px 12px;
        margin-top: 4px;
        line-height: 1.5;
        color: #303133;
        word-break: break-word;
        white-space: pre-wrap;
        background-color: #f5f7fa;
        border-radius: 4px;
      }
    }
  }

  .loading-container {
    padding: 20px;
  }
</style>
